<template>
	<view style="width: 100%;padding: 0 16px;box-sizing: border-box;background-color: #FFFFFF;height: 100upx;">
		<view style="flex: 1;align-items: center;background-color: #F1F1F1;height: 75upx;border-radius: 50upx;">
			<view style="width: 70upx;justify-content: center;">
				<uni-icon type="search" color="#888888" size="18"></uni-icon>
			</view>
			<input @confirm="active()" v-model="val" :disabled="disabled" placeholder="搜索商品" placeholder-style="color:#888888" style="flex: 1;" confirm-type="search"/>
		</view>
		 <view @tap="goBack" v-if="!disabled" style="color: #555555;width: 100upx;align-items: center;justify-content: center;height: 75upx;">取消</view>
	</view>
</template>

<script>
	import uniIcon from './uni-icon.vue';
	export default {
		props: {
			value: {
				type: String,
				default: ""
			},
			disabled: {
				type: Boolean,
				default: false
			}
		},
		components: {
			uniIcon
		},
		data() {
			return {
				val: ""
			}
		},
		mounted() {
			this.val=this.value
		},
		watch: {
			val(val) {
				this.$emit('input', val)
			}
		},
		methods:{
			active(){
				this.$emit('send', this.val)
			},
			goBack(){
				uni.navigateBack({
					delta:1
				})
			}
		}

	}
</script>

<style>
</style>
